import React, { Component } from 'react';
import Taro, { Config } from '@tarojs/taro';
import { View, Map, Image } from '@tarojs/components'
import { AtActionSheet, AtActionSheetItem, AtTextarea } from 'taro-ui'
import { getAssistanceOrder, cancelAssistance } from '@/api/rescue'

const Car = 'https://static3.jekunauto.com/img/rescue/car.png'
const Tag = 'https://static3.jekunauto.com/img/rescue/tag.png'
const Select = 'https://static3.jekunauto.com/img/rescue/select.png'
import './index.scss'


const cancelProject = ['无需救援', '无法联系门店', '等待太久', '价格太高', '选错门店', '其他']
export default class Index extends Component<any, any> {
	constructor() {
		super(...arguments)
		this.state = {
			goods: null,// 信息
			wokeTimeText: "",// 营业时间
			location: {
				longitude: 113.201277,
				latitude: 23.095238
			},//当前位置
			isOpened: false,// 底部动作面板显示
			selectIdx: null,// 当前选择的取消原因
			explain: '',// 补充说明
		}
	}


	UNSAFE_componentWillMount() { }

	componentDidMount() { }

	async componentDidShow() {
		// 获取正在进行中订单
		this.getAssistanceOrder()
	}

	// 监听用户下拉刷新事件
	onPullDownRefresh() {
		// 获取正在进行中订单
		this.getAssistanceOrder()
	}

	// 获取正在进行中订单
	async getAssistanceOrder() {
		// 营业时间范围格式化
		this.setwokeTimeText()
		// 获取订单接口
		await getAssistanceOrder().then((res) => {
			const { data: { data } } = res
			Taro.stopPullDownRefresh()
			this.setState({
				goods: data
			})
		}).catch(() => {
			Taro.stopPullDownRefresh()
		})
	}

	// 营业时间范围格式化
	setwokeTimeText() {
		// 获取门店信息
		let STORE_LOCATION = Taro.getStorageSync('STORE_LOCATION')
		let wokeTimeText = "" // 营业时间范围格式化
		if (STORE_LOCATION) {
			// 营业时间范围格式化
			wokeTimeText = STORE_LOCATION.startTime.slice(0, -3) + '~' + STORE_LOCATION.endTime.slice(0, -3)
		}
		this.setState({
			wokeTimeText
		})
	}

	//点击取消订单，弹出底部动作面板
	onCancel() {
		const { explain } = this.state
		// 微信bug 弹出层中的Textarea 无法修改placeholder样式
		if (!explain) {
			this.setState({
				explain: 1
			}, () => {
				this.setState({
					explain: '',
					isOpened: true
				})
			})
		}
	}

	// 选择取消原因
	onSelect(idx) {
		const { selectIdx } = this.state
		this.setState({
			selectIdx: selectIdx == idx ? null : idx
		})
	}

	// 点击提交
	onSure() {
		const { goods, selectIdx, explain } = this.state
		const _that = this
		if (selectIdx == null) {
			return Taro.showToast({
				title: '请选择取消原因',
				icon: 'none',
				duration: 1800
			})
		}
		Taro.showModal({
			title: '温馨提示',
			content: '是否确定取消救援订单',
			success: function (res) {
				if (res.confirm) {
					const param = {
						orderNumber: goods.orderNumber,
						reason: cancelProject[selectIdx],
						note: explain
					}

					cancelAssistance(param).then(() => {
						Taro.showToast({
							title: '取消救援订单成功',
							icon: 'none',
							duration: 1800
						})
						Taro.redirectTo({ url: '/pages/rescue/index/index' })
					})
				} else if (res.cancel) {
					_that.setState({
						isOpened: false
					})
				}
			}
		})
	}

	// 拨打电话
	goDial(val) {
		if (val) {
			Taro.makePhoneCall({ phoneNumber: String(val) })
		}
	}

	// 取消订单，补充说明
	onChange(val) {
		if (val.length <= 200) {
			this.setState({ explain: String(val) })
		}
	}

	render() {
		const { goods, wokeTimeText, location, isOpened, selectIdx, explain } = this.state
		return (
			<View className='body'>
				{
					goods ?
						<View>
							<View className="map">
								<Map
									style={{ width: '100%', height: "100%" }}
									longitude={goods ? Number(goods.longitude) : Number(location.longitude)}
									latitude={goods ? Number(goods.latitude) : Number(location.latitude)}
									showLocation
									scale={18}
									showCompass
									enableTraffic
									markers={[{
										id: 1,
										longitude: goods ? Number(goods.longitude) : Number(location.longitude),
										latitude: goods ? Number(goods.latitude) : Number(location.latitude),
										width: 52,
										height: 52,
										iconPath: Car,
										callout: {
											content: '救援人员正在路上，请耐心等待',
											color: '#FFFFFF',
											fontSize: 14,
											borderRadius: 60,
											borderColor: '#FFFFFF',
											bgColor: '#FF3B30',
											textAlign: 'center',
											display: 'ALWAYS',
											padding: 8,
											borderWidth: 0,
										}
									}]}
								>
								</Map>
								<View className="project">
									{/* 客服热线 */}
									<View className="project-phone">
										<View className="phone">
											<View className="phone-dial">客服热线：<View className="phone-dial-warning" onClick={() => this.goDial('4008-331-300')}>4008-331-300</View>,救援时间({wokeTimeText})</View>
										</View>
									</View>

									<View className="project-main">
										<View className="project-main-tag">
											<Image className="project-main-tag-img" webp src={Tag} />
											<View className="project-main-tag-text">{goods.statusCn}</View>
										</View>
										{/* 内容 */}
										<View className="project-main-detail">
											<View className="project-main-detail-title">救援内容：</View>
											<View className="project-main-detail-data">{goods.typeCn}</View>
										</View>
										<View className="project-main-detail">
											<View className="project-main-detail-title">服务门店：</View>
											<View className="project-main-detail-data">{goods.storeName}</View>
										</View>
										<View className="project-main-detail">
											<View className="project-main-detail-title">门店电话：</View>
											<View className="project-main-detail-phone-blue" onClick={() => this.goDial(goods.store && goods.store.phone)}>{goods.store && goods.store.phone}</View>
										</View>
										<View className="project-main-detail">
											<View className="project-main-detail-title">救援人员：</View>
											<View className="project-main-detail-data">{goods.staffName}</View>
										</View>
										<View className="project-main-detail">
											<View className="project-main-detail-title">救援人员电话：</View>
											{
												goods && goods.assignList && goods.assignList.length > 0 && goods.assignList.map((val, idx) => {
													return (
														<View className="project-main-detail-phone">
															<View className="project-main-detail-phone-blue" key={val.mobile} onClick={() => this.goDial(val.mobile)}>{val.mobile}</View>
															{
																(idx + 1) != goods.assignList.length ? '、' : ''
															}
														</View>
													)
												})
											}
										</View>
									</View>
								</View>
							</View>
							<View className="bottom">
								<View className="btn" onClick={() => this.onCancel()}>无需救援，取消订单</View>
							</View>
						</View> :
						// 骨架屏
						<View className="skeleton" onClick={() => this.getAssistanceOrder()}>
							<View className="skeleton-bg"></View>
							<View className="skeleton-text"></View>
							<View className="skeleton-text"></View>
							<View className="skeleton-text"></View>
							<View className="skeleton-bottom"></View>
						</View>
				}
				{/* 底部动作面板 */}
				<AtActionSheet isOpened={isOpened}>
					<AtActionSheetItem className="AtAction">
						<View className="AtAction-title">
							<View className="AtAction-title-cancel" onClick={() => { this.setState({ isOpened: false }) }}>取消</View>
							请选择取消原因
						</View>
						<View className="AtAction-main">
							{
								cancelProject.map((item, idx) => {
									return (
										<View key={item} onClick={() => this.onSelect(idx)} className="AtAction-main-data">
											<View className="AtAction-main-data-text">{item}</View>
											<Image webp className={`AtAction-main-data-img ${selectIdx == idx ? 'AtAction-main-data-select' : ''}`} src={Select} />
										</View>
									)
								})
							}
						</View>
						<View className="AtAction-message">
							<AtTextarea
								value={explain}
								onChange={(val) => this.onChange(val)}
								maxLength={200}
								placeholderStyle="color:#999999"
								placeholder='补充说明'
							/>
						</View>
						<View className="AtAction-bottom">
							<View className="btn" onClick={() => this.onSure()}>提交</View>
						</View>
					</AtActionSheetItem>
				</AtActionSheet>
			</View>
		)
	}
}
